<template>
  <div class="dy-main LivingPaymentCheckSure">
    <div class="dy-header">
       <x-header :right-options="{showMore: false}" :left-options="{preventGoBack: true,backText: ''}" @on-click-back="back" @on-click-more="showMenus = true">生活缴费<a slot="right" @click="gotoHistory">历史明细</a></x-header>
    </div>
    <div class="dy-body">
      <group gutter="0">
        <cell title="上海城投水务（集团）有限公司" is-link class="fot26"></cell>
      </group>
      <group>
        <cell title="条形码" :value="request.lineCode"></cell>
        <cell title="账单金额" :value="request.amount"></cell>
        <cell title="支付卡号" value="6217 *** *** *** 987" is-link></cell>
      </group>
      <div class="btn">
        <x-button @click.native="iptSec = true" type="primary">确认</x-button>
      </div>
      <popup v-model="iptSec" position="bottom" max-height="50%">
        <div class="inputSec">
          <header><x-button @click.native="iptSec = false" plain type="primary" class="worry"></x-button><span>付款</span></header>
          <p class="title">支付金额</p>
          <p class="num">￥{{request.amount}}</p>
          <p class="title" style="margin-bottom:10px;">输入支付密码</p>
          <ul>
            <li v-for="item in 6" :key="item"><input type="text" maxlength="1"></li>
          </ul>
        </div>
      </popup>
    </div>
    <div class="dy-footer"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      iptSec: false, // 密码盘显隐
      request: {
        lineCode: '88888', // 条形码
        amount: '2.78元' // 账单金额
      }
    }
  },
  methods: {
    back () {
      this.$publicFun.goBack(this)
    },
    gotoHistory: function () {
      this.$router.push({name: 'LivingPaymentHistory'})
    },
    toNext () {
      this.$router.push({name: ''})
    }
  }
}
</script>
<style lang="less">
.LivingPaymentCheckSure{
  .btn{
    margin-top: .2rem;
    padding: .35rem;
  }
  .inputSec{
    font-size: 0.26rem;
    height: 6.4rem;
    border-radius: 0.3rem 0.3rem 0px 0px;
    background: #fff;
    text-align: center;
    box-sizing: border-box;
    &>header{
      position: relative;
      line-height: 0.88rem;
      border-bottom: 1px solid #ddd;
      &>.worry{
        position: absolute;
        top: 0.3rem;
        left: 0.3rem;
        width: 0.28rem;
        height: 0.28rem;
        background: url("../../assets/img/Financial/worry.png") no-repeat 50% 50%;
      }
    }
    .title{
      color: #999;
      font-size: .26rem;
      margin: .56rem 0px;
    }
    .num{
      font-size: .56rem;
      color: #ff6633;
    }
    &>ul{
      overflow: hidden;
      width: 3.72rem;
      margin: 0 auto;
      box-sizing: border-box;
      li{
        list-style:none;
        float: left;
        width: .4rem;
        height: .5rem;
        border-bottom: 1px solid #ccc;
        margin: 0px .11rem;
        &>input{
          border-style: none;
          width: 100%;
          height: 100%;
          text-align: center;
          outline: none;
          font-size: .3rem;
        }
      }
    }
  }
}
</style>
